<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="roleSetData.isShow" v-if="roleSetData">
      <div class="modal-ctrl-main even-row-ctrl">
        <div class="modal-title">
          <p>数据授权</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="even-row">
            <div class="tree-ctrl-body data-object-tree">
              <div class="tree-table-ctrl">
                <p class="dataList-title">数据授权项</p>
                <div id="tree-dataList" class="ztree"></div>
              </div>
              <div class="section-select-body">
                <div class="shade" v-show="!dataObjectId">
                <!--  ←
                  <br>
                  请先选择左侧数据授权菜单 <br>再对部门进行授权。-->
                </div>
                <ul class="section">
                  <li>数据授权范围</li>
                  <li><input type="radio" name="section" :checked="this.sectionType === 'STATION'" @click="selectSectionType('STATION')" value="STATION">所在部门</li>
                  <li><input type="radio" name="section" :checked="this.sectionType === 'STATIONTREE'" @click="selectSectionType('STATIONTREE')" value="STATIONTREE">所在部门及下属</li>
                  <li>
                    <input type="radio" name="section" :checked="this.sectionType === 'CUSTOM'" @click="selectSectionType('CUSTOM')" value="CUSTOM">部门自定义选择
                    <div class="section-Tree" >
                      <div id="section-dep" v-show="this.sectionType === 'CUSTOM'" class="ztree"></div>
                    </div>
                  </li>
                </ul>
              </div>

            </div>
          </div>
        </div>
        <!--分页功能-->
      <!--  <Pages
          :showItem="10"
          :pageSize="20"
          :allDataSum="treeTableRow.elementsSum"
          :allpage="(Math.ceil(treeTableRow.elementsSum/20))"
          @current-change="tablePageData"
        ></Pages>-->
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subRoleSetDataObjectFn">保存</button>
        </div>
      </div>
    </div>

  </transition>
</template>

<script>
    export default {
        name: "RoleSetData",
        props:["roleSetData","roleId"],
        data(){
          return{
            sessionRoleId:null,
            dataTreeNodes:[],
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              },
              check:{
                chkboxType: { "Y" : "ps", "N" : "ps" },
                chkStyle : "checkbox",
                enable:true
              }
            },
            settingSection: {
              data: {
                simpleData: {
                  enable: true
                },
              },
              check:{
                chkboxType: { "Y" : "ps", "N" : "ps" },
                chkStyle : "checkbox",
                enable:true
              }
            },
            sectionTreeIsShow:false,
            dataObjectId:null,
            customSectionIdArr:[],
            sectionType:null,
            sectionNodes:[],
            dataObjectAmendId:null,
            dataObjectArr:[]
          }
        },
        watch:{
          roleSetData:{
            handler(v1){
              //console.log(v1);
              if( v1.isShow === true ){
                this.sessionRoleId = this.roleId;
                //console.log(this.sessionRoleId);
                this.dataTree();
              }
            },
            deep:true
          },
        },
        methods:{
          dataTree(){
            //数据权限树结构加载
            this.$axios.get(this.HOST+"/priFuncs/dataobject")
              .then((data)=>{
                //获取数据权限列表
                this.dataObjectArr = data.data.data;
                //console.log(this.dataObjectArr);
                //查询该角色拥有的权限
                this.$axios.get(this.HOST+"/privilegeScope/scopeInfo/"+this.sessionRoleId)
                  .then((data)=>{
                    const rolePossessDataObjectArr = data.data.data;
                    ////console.log(rolePossessDataObjectArr);
                    for( let i=0;i<this.dataObjectArr.length;i++ ){

                      for( let k=0;k<rolePossessDataObjectArr.length;k++ ){
                        if( this.dataObjectArr[i].id === rolePossessDataObjectArr[k].funcId ){
                          //console.log(rolePossessDataObjectArr[k].funcId);
                          this.dataObjectArr[i].checked = true;
                        }
                      }
                    }
                    $.fn.zTree.init($("#tree-dataList"), this.setting,this.dataObjectArr );
                  })
                  .catch((err)=>{
                    //console.log(err);
                  });
              })
              .catch((err)=>{
                //console.log(err);
              });


            //所有部门树加载
            this.$axios.get(this.HOST+'/station/getOrgaInfo')
              .then((data)=>{
                //console.log(data);
                this.sectionNodes = data.data.data;
                $.fn.zTree.init($("#section-dep"), this.settingSection, this.sectionNodes);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //部门类型选择
          selectSectionType(sectionType){
            //console.log(sectionType);
            this.sectionType = sectionType;
            if( sectionType === "CUSTOM" ){
              this.sectionTreeIsShow = true;
            }else{
              this.sectionTreeIsShow = false;
              this.customSectionIdArr = [];
            }
          },
          //查询数据权限 根据用户id和功能id
          queryDataObjectList(roleId,dataObjectId){
            //GET /privilegeScope/scopeInfo/{roleId}/{funcId}
            this.$axios.get(this.HOST+"/privilegeScope/scopeInfo/"+roleId+"/"+dataObjectId)
              .then((data)=>{
                //console.log(data);

                //dataObjectAmendId
                if( data.data.data.id ){ //是否为修改
                  this.dataObjectAmendId = data.data.data.id
                }else {
                  this.dataObjectAmendId = null;
                }

                this.sectionType = data.data.data.scope;
                if( this.sectionType === "CUSTOM" ){ //如果为自定义部门，那么勾选
                  for( let i=0;i<this.sectionNodes.length;i++ ){
                    for( let k=0;k<data.data.data.objIds.length;k++ ){
                      if( this.sectionNodes[i].id === data.data.data.objIds[k] ){
                        this.sectionNodes[i].checked = true
                      }
                    }
                  }
                  $.fn.zTree.init($("#section-dep"), this.settingSection,this.sectionNodes);
                }
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //数据权限授权提交
          subRoleSetDataObjectFn(){
            const selectSection = $.fn.zTree.getZTreeObj("section-dep").getCheckedNodes();
            //console.log(selectSection);
            //return false;
            if( this.sectionType === "" || this.sectionType === null ){
              this.s_alert("请选择被授权的部门！");
              // alert("请选择被授权的部门！");
              return false;
            }else if( this.dataObjectId === "" || this.dataObjectId === null ){
              this.s_alert("请选择数据菜单进行授权！");
              // alert("请选择数据菜单进行授权！");
              return false;
            }
            for( let i=0;i<selectSection.length;i++ ){
              this.customSectionIdArr.push(selectSection[i].id);
            }
            let params = {
              "funcId": this.dataObjectId,
              "objIds": this.customSectionIdArr,
              "permissionType": "ORG",
              "rid": this.sessionRoleId,
              "scope": this.sectionType
            };
            if( this.dataObjectAmendId ){
              params.id = this.dataObjectAmendId
            }

            if( this.sectionType === "CUSTOM" ){
              if( this.customSectionIdArr.length === 0 ){
                this.s_alert("请选择自定义部门下的部门！");
                // alert("请选择自定义部门下的部门！");
                return false;
              }
            }
            //console.log(params);
            this.$axios.post(this.HOST+"/privilegeScope/savePrivScope",params)
              .then((data)=>{
                if( data.data.success ){
                  this.s_alert("授权成功！");
                  // alert("授权成功！");
                  this.s_logwrite("基础信息管理-角色管理","进行数据授权");
                  this.close();
                }
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //清除树结构缓存
          clearSection(){
            for( let i=0;i<this.sectionNodes.length;i++ ){
              if( this.sectionNodes[i].checked ){
                this.sectionNodes[i].checked = false;
              }
            }
            $.fn.zTree.init($("#section-dep"), this.settingSection,this.sectionNodes);
          },
          //关闭弹窗
          close(){
            this.clearSection();
            this.sectionType = null;
            this.dataObjectId = null;
            this.$emit("roleSetDataClose")
          }
        },
        mounted(){
          const _this = this;
          this.setting.callback={
            onClick:function(event,treeId,treeNode){
              _this.dataObjectId = treeNode.id;
              //console.log("功能id"+treeNode.id);
              //console.log("角色id"+_this.sessionRoleId);
              _this.queryDataObjectList(_this.sessionRoleId,_this.dataObjectId);
              _this.clearSection();
            }
          }
        }
    }
</script>

<style scoped>
  .tree-table-ctrl{
    position: relative;
  }
  .data-object-tree{
    border:2px solid rgba(0,0,0,0.08);
  }
  .dataList-title{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: left;
    z-index: 2;
    background-color: #fff;
    box-sizing: border-box;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(53,53,53,.1);
  }
  #tree-dataList{
    padding-top: 40px;
    box-shadow: none;
  }
  .tree-ctrl-body .tree-table-ctrl:nth-of-type(1){
    width: 50%;
  }
  .modal-ctrl-content{
    height: 300px;
  }
  .even-row{
    height: 100%;
  }
  .section-Tree{
    height: 160px;
    overflow: auto;
  }
  .section-select-body{
    width: 50%;
    float: left;
    box-sizing: border-box;
    position: relative;
  }
  .section-select-body .shade{
    content: " ";
    position: absolute;
    left: 0;
    top: 30px;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: rgba(255,255,255,0.4);
    color: #c9302c;
    font-size: 18px;
    text-align: center;
    padding-top: 100px;
  }
  .section-select-body .section{
    box-sizing: border-box;
    border-radius: 6px;
    height: 100%;
  }
  .section-select-body .section > li{
    border-bottom:1px solid rgba(53,53,53,0.1);
    box-sizing: border-box;
    padding: 5px 10px;
  }
  .section-select-body .section > li:last-child{
    border-bottom: none;
  }
  .section-select-body{
    height: 100%;
     border-left: 1px solid rgba(53,53,53,0.1);
  }

  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }

</style>
